<template>
  <el-container v-loading="loading">
    <el-row>
      <el-button icon="fa fa-fw fa-refresh" size="mini" type="info" @click="handleRefresh">
      </el-button>
      <el-input placeholder="请输入订单编号" v-model="card_no" style="width: 200px;" />
	  <el-select v-model="cateid" placeholder="请选择订单类型" @change="Select($event)">
		  <el-option v-for="(item,index) in rylx"  :label="item.label" :value="item.cateid" :key="index"></el-option>
		</el-select>
      <el-button type="primary" icon="el-icon-search" @click="seach_btn">搜索</el-button>
      <el-button type="primary" @click="add_btn">添加订单</el-button>

      <div style="float: right;margin-right: 20px;">
        <el-date-picker v-model="order_time" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" value-format="yyyy-MM-dd" @change='download_btn'>
        </el-date-picker>
        <el-button type="primary"><a :href="url+'/index.php?s=home/excel/order&time_area='+times" target="_blank" style='color: #fff;'>导出数据</a></el-button>
      </div>
    </el-row>

    <el-table @selection-change="handleSelectionChange" :data="tableData" tooltip-effect="dark" border :default-sort="{prop: 'date', order: 'descending'}"
      :row-class-name="tableRowClassName" size="small">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="客户姓名">
              <span>{{ props.row.passenger_name }}</span>
            </el-form-item>
            <el-form-item label="客户电话">
              <span>{{ props.row.passenger_phone }}</span>
            </el-form-item>
            <el-form-item label="下单时间">
              <span>{{ props.row.create_time }}</span>
            </el-form-item>
            <el-form-item label="预约时间">
              <span>{{ props.row.about_time }}</span>
            </el-form-item>
            <!-- <el-form-item label="代驾编号">
              <span>{{ props.row.work_number }}</span>
            </el-form-item> -->
            <el-form-item label="司机姓名">
              <span>{{ props.row.real_name }}</span>
            </el-form-item>
            <el-form-item label="司机电话">
              <span>{{ props.row.work_phone }}</span>
            </el-form-item>
            <el-form-item label="接单时间">
              <span>{{ props.row.send_time }}</span>
            </el-form-item>
            <el-form-item label="开始行程时间">
              <span>{{ props.row.serviceing_time }}</span>
            </el-form-item>
            <el-form-item label="实际起点">
              <span>{{ props.row.start_point }}</span>
            </el-form-item>
            <el-form-item label="等待时长">
              <span>{{ props.row.waitlag }}分钟</span>
            </el-form-item>
            <el-form-item label="实际终点">
              <span>{{ props.row.end_point }}</span>
            </el-form-item>
            <el-form-item label="结束行程时间">
              <span>{{ props.row.service_time }}</span>
            </el-form-item>
            <el-form-item label="实际费用(元)">
              <span>{{ props.row.actual_price }}</span>
            </el-form-item>
            <el-form-item label="实际支付(元)">
              <span>{{ props.row.pay_price }}</span>
            </el-form-item>
            <el-form-item label="支付方式">
              <span v-if="props.row.pay_type == 1">微信</span>
              <span v-if="props.row.pay_type == 2">余额</span>
              <span v-if="props.row.pay_type == 3">现金</span>
            </el-form-item>
            <el-form-item label="订单取消">
              <span>{{props.row.apply_delete == 0 ? '': props.row.apply_delete == 1 ?  '用户取消' : '司机'}}<span v-if="props.row.apply_delete !=0&&props.row.apply_delete !=1">:</span>{{ props.row.apply_remarks }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="order_no" label="订单号" width="160">
      </el-table-column>
      <el-table-column prop="passenger_name" label="下单用户" width="160">
      </el-table-column>
      <el-table-column prop="passenger_phone" label="联系方式" width="160">
      </el-table-column>
      <el-table-column prop="start_adds" label="起点">
      </el-table-column>
      <el-table-column prop="target_adds" label="终点">
      </el-table-column>
      <!-- <el-table-column prop="apart" label="预估里程(km)" >
      </el-table-column> -->
      <el-table-column prop="total_price" label="预估费用(元)" >
      </el-table-column>
      <el-table-column prop="passerNum" label="乘客人数" >
      </el-table-column>
      <!-- <el-table-column prop="qbprice" label="起步价(元)" >
      </el-table-column> -->
	  <el-table-column prop="refund_status" label="退单状态" >
		</el-table-column>
		<el-table-column prop="real_name" label="接单司机" >  
	  </el-table-column>
	  <el-table-column prop="work_phone" label="司机电话" width="110">
	  </el-table-column>
	   <el-table-column fixed="right" label="退单操作">
		   <template slot-scope="scope">
		    <el-button size="mini" type="success" title="审核退款" @click="reject(scope.row.id,2)" v-if="scope.row.apply_refund == '1'">
		       审核退款
		     </el-button>
		   <el-button size="mini" type="warning" title="拒绝退款" @click="reject(scope.row.id,3)" v-if="scope.row.apply_refund == '1'">
		     拒绝退款
		   </el-button>
		   			  </template>
		   </el-table-column>

      <el-table-column prop="type" label="订单类型" width="105">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type==0">自己叫车</el-tag>
          <el-tag v-if="scope.row.type==1">帮朋友叫车</el-tag>
          <el-tag v-if="scope.row.type==2">二维码下单</el-tag>
          <el-tag v-if="scope.row.type==3">司机代叫</el-tag>
          <el-tag v-if="scope.row.type==4">系统订单</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="is_send" label="订单状态" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.is_send==0">待接单</el-tag>
          <el-tag v-if="scope.row.is_send==1">已接单</el-tag>
          <el-tag v-if="scope.row.is_send==2">已取消</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="is_service" label="服务状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.is_service == '0'">待出发</el-tag>
          <el-tag v-if="scope.row.is_service == '1'">出发</el-tag>
          <el-tag v-if="scope.row.is_service == '2'">到达目的地</el-tag>
          <el-tag v-if="scope.row.is_service == '4'">到达用户身边</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button icon="fa fa-fw fa-eye" size="mini" type="primary" title="查看路线" @click="handleDataView(scope.row.order_no)"
            v-if="scope.row.is_service == '2'">
            查看路线
          </el-button>

        </template>

      </el-table-column>
    <!--  <el-table-column prop="actual_km" label="实际里程" width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.actual_km }}</span>
        </template>
      </el-table-column> -->
     <!-- <el-table-column prop="waitlag" label="等待时长" width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.waitlag || 0}}分钟</span>
        </template>
      </el-table-column> -->

      <!-- <el-table-column prop="actual_price" label="实际产生费用" width="100">
        <template slot-scope="scope">
          <i class="fa fa-fw fa-rmb"></i>
          <span style="margin-left: 10px">{{ scope.row.actual_price }}</span>
        </template>
      </el-table-column> -->

     <!-- <el-table-column prop="pay_price" label="实际支付费用" width="100">
        <template slot-scope="scope">
          <i class="fa fa-fw fa-rmb"></i>
          <span style="margin-left: 10px">{{ scope.row.pay_price }}</span>
        </template>
      </el-table-column> -->
   <!--   <el-table-column prop="is_pay" label="支付状态" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.is_pay==0">待支付</el-tag>
          <el-tag v-if="scope.row.is_pay==1">支付</el-tag>
        </template>
      </el-table-column> -->

    </el-table>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage"
      :page-sizes="pagination.pageSizes" :page-size="pagination.pageSize" :total="pagination.total" layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

  </el-container>
</template>

<script>
import api from '@/fetch/api.js'
export default {
  mounted: function () {
    console.log(api.baseUrlPrefix)
    this.getData()
  },
  data(){
    return {
      passerObj:{
        three:'三人'
      }
    }
  },
  methods: {
    /* design by weichat_admin */
    reject (id, type) {
      let _this = this
      this.api.getOrderRefund({
			  id: id,
			  type: type
      }).then(function (res) {
			  if (res.code == 1) {
			    _this.$message({
			      showClose: true,
			      message: res.msg,
			      type: 'success'
			    })
			  } else {
			    _this.$message({
			      showClose: true,
			      message: res.msg,
			      type: 'warning'
			    })
			  }
      }).catch(function (res) {
			  throw new Error(res)
      })
    },
    /**
       * 跳转1至路线页面
       * */
    handleDataView (order_no) {
      this.$router.push({
        path: '/OrderManagement/OrderTrack',
        query: {
          order_no: order_no
        }
      })
    },
    /**
       * 数据请求
       * */
    getData: function () {
      let _this = this
      this.api.getOrderList({
        page: this.pagination.currentPage,
        rows: this.pagination.pageSize,
        order_no: this.card_no,
        cateid: this.cateid,
        time_area: this.times
        // uid: this.constraintForm.uText != '' ? this.constraintForm.uid : '',
        // rid: this.constraintForm.rText != '' ? this.constraintForm.rid : '',
        // class_id: this.constraintForm.class_id,
        // type: this.constraintForm.type,
        // pay_time: this.constraintForm.pay_time.length > 0 ? this.constraintForm.pay_time[0] + '-' + this.constraintForm.pay_time[1] : 0
      }).then(function (res) {
        if (res.code == 1) {
          for (let i = 0; i < res.data.data.length; i++) {
            res.data.data[i].is_send = res.data.data[i].is_send.toString()
            res.data.data[i].is_service = res.data.data[i].is_service.toString()
            res.data.data[i].type = res.data.data[i].type.toString()
            res.data.data[i].is_pay = res.data.data[i].is_pay.toString()
            res.data.data[i].pay_type = res.data.data[i].pay_type.toString()
          }
          _this.tableData = res.data.data
          _this.pagination.total = res.data.total
        }
        _this.loading = false
      }).catch(function (res) {
        throw new Error(res)
      })
    },
    /**
       * 分页数改变
       */
    handleSizeChange: function (pageSize) {
      this.pagination.pageSize = pageSize
      this.getData()
    },
    /**
       * 当前页面改变
       * @param currentPage
       */
    handleCurrentChange: function (currentPage) {
      this.pagination.currentPage = currentPage
      this.getData()
    },
    tableRowClassName ({
      row,
      rowIndex
    }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    /**
       * 编辑单个
       * */
    taskAppointItem (index, row) {
      let _this = this
      let _id = row.id
      if (_this.constraintForm.text == '' || _this.constraintForm.id == '') {
        this.$message({
          type: 'warning',
          message: '请选在上方进行筛选需要派单的服务人员'
        })
        return
      }
      this.$confirm('此操作将订单分派给: ' + _this.constraintForm.text + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _this.api.taskAppoint({
          oid: _id,
          rid: _this.constraintForm.id
        }).then(function (res) {
          if (res.code == 1) {
            _this.getData()
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'success'
            })
          } else {
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'warning'
            })
          }
        }).catch(function (res) {
          throw new Error(res)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消该操作'
        })
      })
    },
    /**
       * 数据刷新
       */
    handleRefresh: function () {
      this.order_time = ''
      this.pagination.currentPage = 1
      this.card_no = ''
      this.times = ''
      this.getData()
      this.$message({
        showClose: true,
        message: '刷新成功',
        type: 'success'
      })
    },
    /**
       * 表格选中状态记录
       * @param val
       */
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    /**
       * 获取时间
       * @param type
       */
    getTimed: function () {
      const start = new Date()
      const end = new Date()
      let day = 0
      if (this.constraintForm.timeType == '2') {
        day = 7
      } else if (this.constraintForm.timeType == '3') {
        day = 30
      } else if (this.constraintForm.timeType == '4') {
        day = 90
      }
      if (this.constraintForm.timeType == '2' || this.constraintForm.timeType == '3' || this.constraintForm.timeType ==
          '4') {
        start.setTime(start.getTime() - 3600 * 1000 * 24 * day)
        let timeArr = []
        timeArr.push(start.getTime())
        timeArr.push(end.getTime())
        this.constraintForm.pay_time = timeArr
      } else if (this.constraintForm.timeType == '1' || this.constraintForm.timeType == '5') {
        this.constraintForm.pay_time = []
      }
    },
    /**
       * 条件数据检索
       */
    constraintSearchData: function () {
      this.getData()
      this.$message({
        showClose: true,
        message: '查询成功',
        type: 'success'
      })
    },
    /**
       * 远程数据加载用户
       */
    querySearchUserAsync (queryString, cb) {
      let _this = this
      this.api.searchUserByUserName({
        name: queryString
      }).then(function (res) {
        if (res.code == '1') {
          cb(res.data.data)
        }
      }).catch(function (res) {
        throw new Error(res)
      })
    },
    /**
       * 搜索下拉选择用户
       * @param item
       */
    handleSelectUser (item) {
      this.constraintForm.uText = item.nickname
      this.constraintForm.uid = item.id
    },
    /**
       * 远程数据加载跑腿
       */
    querySearchRunnerAsync (queryString, cb) {
      let _this = this
      this.api.searchRunnerByUserName({
        name: queryString
      }).then(function (res) {
        if (res.code == '1') {
          cb(res.data.data)
        }
      }).catch(function (res) {
        throw new Error(res)
      })
    },
    /**
       * 搜索下拉选择跑腿
       * @param item
       */
    handleSelectRunner (item) {
      this.constraintForm.rText = item.name
      this.constraintForm.rid = item.id
    },
    seach_btn () {
      // if (!this.card_no) {
      //   this.$message({
      //     showClose: false,
      //     message: '订单编号不能为空',
      //     type: 'warning',
      //     duration: 1000
      //   })
      //   return false
      // }
      this.order_time = ''

      this.pagination.currentPage = 1
      this.times = ''
      this.getData()
    },
    Select (k) {
      let that = this
      this.cateid = k
    },
    add_btn () {
      this.$router.push({
        path: '/OrderManagement/OrderAdd'
      })
    },
    download_btn () {
      if (!this.order_time) {
        this.pagination.currentPage = 1
        this.card_no = ''
        this.times = ''
        this.getData()
      } else {
        let times = this.order_time[0] + '~' + this.order_time[1]
        this.pagination.currentPage = 1
        this.times = times
        this.card_no = ''
        this.getData()
      }
    }
  },
  data () {
    return {
      times: '',
      url: api.baseUrlPrefix,
      order_time: '',
      card_no: '',
      loading: true, // 页面加载
      tableData: [
        // {
        //   "id":16,                //类型：Number  必有字段  备注：订单id
        //   "name":"熊二",                //类型：String  必有字段  备注：姓名
        //   "phone":"15111111111",                //类型：String  必有字段  备注：电话
        //   "uid":18,                //类型：Number  必有字段  备注：关联用户
        //   "rid":0,                //类型：Number  必有字段  备注：跑腿id
        // "runner":{                //类型：Object  必有字段  备注：跑腿
        //      "name":"帅哥"                //类型：String  必有字段  备注：跑腿人员名
        //  },
        // "confirm_code":"mock",                //类型：String  必有字段  备注：收货码
        //   "order_no":"2018090319111523994666",                //类型：String  必有字段  备注：订单号
        //   "pic":"mock",                //类型：String  必有字段  备注：图片路径
        //   "pics":"mixed",                //类型：Mixed  必有字段  备注：图片合集
        //   "voice":"mock",                //类型：String  必有字段  备注：语音路径
        //   "goods":"美食",                //类型：String  必有字段  备注：商品名
        //   "class_id":1,                //类型：Number  必有字段  备注：1帮我买2帮我送3带排队4代驾5家政6代办
        //   "total_price":"34.86",                //类型：String  必有字段  备注：订单总费用
        //   "pay_price":"32.22",                //类型：String  必有字段  备注：实际支付费用
        //   "weight":0,                //类型：Number  必有字段  备注：重量
        //   "start_adds":"陕西省西安市未央区未央路60号qweqw",                //类型：String  必有字段  备注：起始位置
        //   "start_adds_location":{                //类型：Object  必有字段  备注：起始经纬度
        //     "lng":108.95323064451,                //类型：Number  必有字段  备注：无
        //     "lat":34.301103430993                //类型：Number  必有字段  备注：无
        //   },
        //   "target_adds":"陕西省西安市未央区凤城八路",                //类型：String  必有字段  备注：目标位置
        //   "target_adds_location":{                //类型：Object  必有字段  备注：目标坐标
        //     "lng":108.95323064451,                //类型：Number  必有字段  备注：无
        //     "lat":34.301103430993                //类型：Number  必有字段  备注：无
        //   },
        //   "remark":"adaqeq",                //类型：String  必有字段  备注：备注
        //   "pay_time":"mock",                //类型：String  必有字段  备注：下单时间
        //   "expect_time":"1970-01-01 08:11:06",                //类型：String  必有字段  备注：期待送达时间
        //   "bargaining":1,                //类型：Number  必有字段  备注：是否接收议价0否，1是
        //   "is_service":"mock",                //类型：String  必有字段  备注：确认送达
        //   "service_time":"mock",                //类型：String  必有字段  备注：确认送达时间
        //   "pay_type":"mock",                //类型：String  必有字段  备注：支付方式1是微信2是余额
        //   "apart":"mock",                //类型：String  必有字段  备注：距离
        //   "secure_price":"mock",                //类型：String  必有字段  备注：保证金
        //   "apply_delete":"mock",                //类型：String  必有字段  备注：申请取消订单
        //   "apply_time":"mock",                //类型：String  必有字段  备注：申请取消时间
        //   "is_send":"mock",                //类型：String  必有字段  备注：0未接单，1已接单
        //   "send_time":"mock",                //类型：String  必有字段  备注：接单时间
        //   "reward_price":"mock",                //类型：String  必有字段  备注：跑腿人员红包
        //   "user":{                //类型：Object  必有字段  备注：关联用户
        //     "id":18,                //类型：Number  必有字段  备注：uid
        //     "nickname":"在水一方",                //类型：String  必有字段  备注：昵称
        //     "member_grade":2                //类型：Number  必有字段  备注：等级
        //   }
        // },
      ],
      multipleSelection: [],
      pagination: {
        total: 5,
        currentPage: 1,
        pageSize: 10,
        pageSizes: [5, 10, 20, 25, 30, 50, 100]
      },
      rylx: [
				  {cateid: '', label: '全部订单'},
				  {cateid: '2', label: '代驾订单'},
				  {cateid: '1', label: '打车订单'}
				  ],
      cateid: '',
      constraintForm: {
        uid: '', // 	用户id，默认0，会员用户-》用户列表-》获取用户名查询列表
        uText: '', //  用户名称字符
        rid: '', // 	跑腿id，默认0，服务人员-》服务人员评价-》获取服务人员名称模糊查询列表
        rText: '', //  服务人员名称字符
        class_id: '0', // 1帮我买2帮我送3带排队4代驾5家政6代办，默认0
        type: '0', // 	1：待付款 2：代发货 3：已发货待收货 4：已完成 5：用户取消 ,默认0
        pay_time: '', // 下单时间默认0，'-'分隔时间戳，没有毫秒
        timeType: '1' // 时间类型 1=>不限 2=>近一周 3=>近一月 4=>近三月 5=>自定义
      }
    }
  }
}
</script>

<style scoped>
  /deep/.demo-table-expand .el-form-item label {
     width: 100px;
 }
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 100px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 25%;
  }

  .el-container {
    display: block;
  }

  .el-table,
  .el-row {
    width: 98% !important;
    margin: 15px auto;
  }

  .el-pagination {
    text-align: center;
    margin: 15px 0;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .logo-img {
    width: 40px;
    height: 40px;
  }

  .autocomplete-group {
    display: inline-block;
    margin-left: 15px;
    font-size: 12px;
  }
</style>
